<template>
	<view class="container">
		<scroll-view scroll-y class="content-wrapper" :show-scrollbar="false">
		  <!-- 标题 -->
		  <view class="title">{{ newsDetail.title }}</view>
		  <!-- 作者和时间 -->
		  <view class="meta">
				<text class="time">{{ newsDetail.add_time }}</text>
				<view class="reads">
					<view class="reads-img">
						<image src="/static/reads.png" mode=""></image>
					</view>
					<view class="news-reads"> {{newsDetail.click}} </view>
				</view>
		  </view>
		  <view class="content">
				<!-- <rich-text :nodes="newsDetail.content"></rich-text> -->
				<view v-html="newsDetail.content"></view>
		  </view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			newsDetail: {},
			baseURL: getApp().globalData.baseUrl,
		};
	},
	onLoad(options) {
		const newsId = options.id;
		console.log(options)
		this.getNewsDetail(newsId);
	},
	methods: {
		processHtmlImages(html) {
			let processed = html.replace(/<img[^>]*>/gi, match => {
				return match
					.replace(/(width|height|style)=["'][^"']*["']/gi, '')
					.replace(/(<img)/, '$1 style="max-width:100%!important;height:auto!important;display:block!important;margin:10rpx auto!important;"');
			});
			processed = processed.replace(/style=(["'])[^"']*?\bwidth:[^;]+;?/gi, 'style=$1max-width:100%!important;');
			return processed;
		},
		// 模拟获取新闻详情数据
		getNewsDetail(id) {
			uni.request({
				url: this.baseURL + '/api/index/article',
				method: 'GET',
				data: {id:id},
				header: { 'Content-Type': 'application/json' },
				success: (res) => {
					  console.log(res)
					  this.newsDetail = res.data.data.info
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			})
			setTimeout(() => {
				this.newsDetail.content = this.processHtmlImages(this.newsDetail.content)
				console.log(this.newsDetail.content)
			}, 500);
		}
	}
};
</script>

<style scoped>
	.container {display: flex;flex-direction: column;height: 100vh;background-color: #f8f8f8;}
	.content-wrapper {flex: 1;padding: 30rpx;box-sizing: border-box;}
	.title {font-size: 40rpx;font-weight: bold;line-height: 1.5;color: #333;margin-bottom: 30rpx;}
	.meta {display: flex;justify-content: space-between;font-size: 26rpx;color: #999;margin-bottom: 40rpx;flex-direction: row;}
	.cover {width: 100%;border-radius: 16rpx;margin-bottom: 40rpx;}
	.content {font-size: 32rpx;color: #333;line-height: 1.8;}
	p {margin-bottom: 40rpx;text-align: justify;}
	.content {overflow-x: hidden;max-width: 100vw;}
	.reads{display: flex;flex-direction: row;justify-content: center;padding-right: 20rpx;}
	.reads-img{width: 30rpx;height: 30rpx;}
	.reads-img image{width: 30rpx;height: 30rpx;}
</style>